<!DOCTYPE html>
<html>

<head></head>

<body>
    <p>可能的目录内容示例</p>
    <div style="border: 1px solid #000;padding:10px;">
        <h1>Directory listing for /dir/</h1>
        <hr>
        <ul>
            <li><a href="_.txt">_.txt</a></li>
            <li><a href="analyser_dir.js">analyser_dir.js</a></li>
            <li><a href="analyser_dir.html">analyser_dir.html</a></li>
            <li><a href="1000063389935916226.txt">1000063389935916226.txt</a></li>
            <li><a href="1032681026570212547.txt">1032681026570212547.txt</a></li>
            <li><a href="1054460915149231300.txt">1054460915149231300.txt</a></li>
            <li><a href="1338903453006615746.txt">1338903453006615746.txt</a></li>
            <li><a href="1465564995919074499.txt">1465564995919074499.txt</a></li>
            <li><a href="1720180474481005762.txt">1720180474481005762.txt</a></li>
            <li><a href="1808368152870966467.txt">1808368152870966467.txt</a></li>
            <li><a href="1876546666413216963.txt">1876546666413216963.txt</a></li>
        </ul>
    </div>
    <p>可能的可视化示例</p>
    <div style="border: 1px solid #000;padding:10px;">
        <style>
            #main {
                display: grid;
                grid-template-columns: repeat(8, 50px);
                grid-template-rows: repeat(4, 50px);
                background-color: #ddd;
                width: 400px;
                height: 200px;
                margin: auto;
            }

            .free {
                opacity: 60%;
            }

            .belongs-to-0 {
                background-color: cadetblue !important;
                border: 10px solid #ddd;
                font-size: 10px;
                text-align: center;
                display: flex;
                align-items: center;
            }

            .belongs-to-1 {
                background-color: blueviolet !important;
                border: 10px solid #ddd;
                font-size: 10px;
                text-align: center;
                display: flex;
                align-items: center;
            }

            div.belongs-to-1 p {
                margin: auto;
                text-align: center;
            }

            div.belongs-to-0 p {
                margin: auto;
                text-align: center;
            }

            #comment p {
                margin: auto;
                text-align: center;
            }

            .c_button_upload {
                margin: auto;
                margin-top: 30px;
                text-align: center;
            }

            li {
                text-align: center;
            }
        </style>
        <div id="main">
            <div class="belongs-to-0 free" id="tile00" style="grid-column: 1;grid-row: 1;">
                <p></p>
            </div>
            <div class="belongs-to-0 free" id="tile01" style="grid-column: 1;grid-row: 2;">
                <p></p>
            </div>
            <div class="belongs-to-0 free" id="tile02" style="grid-column: 1;grid-row: 3;">
                <p></p>
            </div>
            <div class="belongs-to-0 free" id="tile03" style="grid-column: 1;grid-row: 4;">
                <p></p>
            </div>
            <div class="belongs-to-0 free" id="tile10" style="grid-column: 2;grid-row: 1;">
                <p></p>
            </div>
            <div class="belongs-to-0 free" id="tile11" style="grid-column: 2;grid-row: 2;">
                <p></p>
            </div>
            <div class="belongs-to-0 free" id="tile12" style="grid-column: 2;grid-row: 3;">
                <p></p>
            </div>
            <div class="belongs-to-0 free" id="tile13" style="grid-column: 2;grid-row: 4;">
                <p></p>
            </div>
            <div class="belongs-to-0 free" id="tile20" style="grid-column: 3;grid-row: 1;">
                <p></p>
            </div>
            <div class="belongs-to-0 free" id="tile21" style="grid-column: 3;grid-row: 2;">
                <p></p>
            </div>
            <div class="belongs-to-0 free" id="tile22" style="grid-column: 3;grid-row: 3;">
                <p></p>
            </div>
            <div class="belongs-to-0 free" id="tile23" style="grid-column: 3;grid-row: 4;">
                <p></p>
            </div>
            <div class="belongs-to-0 free" id="tile30" style="grid-column: 4;grid-row: 1;">
                <p></p>
            </div>
            <div class="belongs-to-0 free" id="tile31" style="grid-column: 4;grid-row: 2;">
                <p></p>
            </div>
            <div class="belongs-to-0" id="tile32" style="grid-column: 4;grid-row: 3;">
                <p>2</p>
            </div>
            <div class="belongs-to-0 free" id="tile33" style="grid-column: 4;grid-row: 4;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile40" style="grid-column: 5;grid-row: 1;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile41" style="grid-column: 5;grid-row: 2;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile42" style="grid-column: 5;grid-row: 3;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile43" style="grid-column: 5;grid-row: 4;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile50" style="grid-column: 6;grid-row: 1;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile51" style="grid-column: 6;grid-row: 2;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile52" style="grid-column: 6;grid-row: 3;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile53" style="grid-column: 6;grid-row: 4;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile60" style="grid-column: 7;grid-row: 1;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile61" style="grid-column: 7;grid-row: 2;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile62" style="grid-column: 7;grid-row: 3;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile63" style="grid-column: 7;grid-row: 4;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile70" style="grid-column: 8;grid-row: 1;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile71" style="grid-column: 8;grid-row: 2;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile72" style="grid-column: 8;grid-row: 3;">
                <p></p>
            </div>
            <div class="belongs-to-1 free" id="tile73" style="grid-column: 8;grid-row: 4;">
                <p></p>
            </div>
        </div>
        <div id="comment">
            <p>player 0 set position (2, 3)</p>
        </div>
        <div style="width: 100%;display: grid;grid-template-rows: repeat(1, 1fr); grid-template-columns: repeat(4,1fr);">
            <input type="text" name="url" id="urldir" style="grid-column: 2;grid-row: 1;">
            <input type="button" id="submit" value="Click me to specify record dir url" style="grid-column: 3;grid-row: 1;">
        </div>
        <ul id="file-list" style="margin: auto;">
            <li id="li2145870642531062977">name: 2145870642531062977 -&gt; player0 to player1 -&gt; 145 rounds</li>
            <li id="li262153655203976386">name: 262153655203976386 -&gt; player1 to player0 -&gt; 230 rounds</li>
            <li id="li572633103638516930">name: 572633103638516930 -&gt; player0 to player1 -&gt; 97 rounds</li>
            <li id="li719110816959354050">name: 719110816959354050 -&gt; player1 to player0 -&gt; 54 rounds</li>
            <li id="li1000063389935916226">name: 1000063389935916226 -&gt; player0 to player1 -&gt; 162 rounds</li>
            <li id="li1338903453006615746">name: 1338903453006615746 -&gt; player1 to player0 -&gt; 211 rounds</li>
        </ul>
    </div>
</body>

</html>
